<template>
  <div>
    <div class="page-title" style="width: 100%">审核人员</div>
    <el-card>
      <div class="page-content">
        <el-row :gutter="10">
          <el-form label-width="100px" :inline="true">
            <el-row>
              <el-form-item>
                <el-button type="primary" @click="addCheckPeople"
                  >添加审核人员</el-button
                >
              </el-form-item>

              <el-form-item>
                <el-button
                  type="danger"
                  @click="deleteSelectedItem"
                  icon="el-icon-delete"
                  >一键删除</el-button
                >
              </el-form-item>

              <el-form-item>
                <el-select
                  v-model="option"
                  placeholder="请选择"
                  clearable
                  filterable
                  @clear="clearSelected"
                >
                  <el-option
                    v-for="item in tableData"
                    :key="item.checkPersonName"
                    :label="item.checkPersonName"
                    :value="item.checkPersonName"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  @click="queryCheckName"
                  >查询</el-button
                >
              </el-form-item>
            </el-row>
          </el-form>
        </el-row>
        <el-row
          style="
            padding: 10px;
            border-top: 2px dashed #dddddd;
            text-align: center;
          "
        >
          <el-table
            :data="tableData"
            style="width: 100%"
            max-height="560"
            highlight-current-row
            border
            @selection-change="handleSelectionChange"
            :row-key="getRowKey"
          >
            >
            <el-table-column
              type="selection"
              :reserve-selection="true"
            ></el-table-column>

            <el-table-column
              type="index"
              label="序号"
              align="center"
              :index="this.indexStartNum"
            ></el-table-column>
            <el-table-column
              prop="checkPersonID"
              label="审核人员ID"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="companyName"
              label="单位名称"
              align="center"
            ></el-table-column>

            <el-table-column
              prop="checkPersonName"
              label="审核人员姓名"
              align="center"
            ></el-table-column>

            <el-table-column
              prop="roleName"
              label="角色名"
              align="center"
            ></el-table-column>

            <el-table-column label="操作" width="350" align="center">
              <template slot-scope="scope">
                <div class="inline-td">
                  <el-button
                    size="mini"
                    type="primary"
                    icon="el-icon-edit"
                    @click="modifyCheckPerson(scope.row)"
                    >修改</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
            <span>此操作将永久删除该条信息, 是否继续?</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="submitDelet">确 定</el-button>
            </span>
          </el-dialog>
          <div class="pagination-base">
            <el-pagination
              @current-change="handlePageChange"
              :current-page="pageIdx"
              :page-size="pageSize"
              :total="total"
              background
              layout="total, prev, pager, next, jumper"
            ></el-pagination>
          </div>
        </el-row>
      </div>
    </el-card>

    <!-- 弹出“添加审核人员”框 -->
    <el-dialog
      title="添加审核人员"
      :visible.sync="dialogFormVisible"
      width="25%"
      style="width: 2000px; height: 800px; left: -20%; top: 0%"
    >
      <div style="height: 25vh; width: 100%; overflow: auto">
        <el-form label-width="100px" label-position="right" style="width: 100%">
          <el-row>
            <el-col :span="15">
              <el-form-item label="审核人员">
                <el-select
                  v-model="checkPersons"
                  multiple
                  collapse-tags
                  placeholder="请选择"
                  size="medium"
                  filterable
                  clearable
                >
                  <el-option
                    v-for="item in options"
                    :key="item.employeeID"
                    :label="item.info"
                    :value="item.employeeID"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="15">
              <el-form-item label="角色" size="small">
                <el-select v-model="role" clearable placeholder="请选择">
                  <el-option
                    v-for="item in roles"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAddPerson">确 定</el-button>
      </div>
    </el-dialog>

    <!-- “修改”弹出框 -->
    <el-dialog
      title="修改审核人员信息"
      :visible.sync="AddFormVisible"
      width="25%"
      style="width: 2000px; height: 800px; left: -20%; top: 0%"
    >
      <div style="height: 25vh; width: 100%; overflow: auto">
        <el-form
          :model="updateCheckPersons"
          label-width="100px"
          label-position="right"
          style="width: 100%"
        >
          <el-row>
            <el-col :span="15">
              <el-form-item label="审核人员姓名">
                <el-input
                  v-model="updateCheckPersons.checkPersonName"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="15">
              <el-form-item label="角色" size="small">
                <el-select
                  v-model="roleData"
                  clearable
                  value-key="roleCode"
                  placeholder="请选择"
                  @change="getRoleData"
                >
                  <el-option
                    v-for="item in roles"
                    :key="item.roleCode"
                    :label="item.name"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateCheckPerson()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  GetCheckPerson,
  UpdateCheckPerson,
} from "../../../services/hseCheckPerson";
import { DeleteSelectedItem } from "../../../services/hseCheckPerson";
import { GetRoles } from "../../../services/hseCheckPerson";
import {
  getCheckPerson,
  AddCheckperson,
  GetAllPersonInfo,
  DeleteCheckPerson,
} from "../../../services/checkPerson";

//import { getDay } from "./time";
import Vue from "vue";
import VueCookies from "vue-cookies";
Vue.use(VueCookies);
export default {
  data() {
    return {
      option: "",
      AddFormVisible: false,
      roles: [],
      role: "",
      roleCode: "",
      dialogFormVisible: false,
      multipleSelection: [],
      checkPersonID: [],
      dialogVisible: false,
      tableData: [],
      options: [],
      pageIdx: 0,
      pageSize: 10,
      checkPersons: [],
      indexStartNum: 1,
      total: 0,
      updateCheckPersons: {
        checkPersonID: "",
        checkPersonName: "",
        companyName: "",
        qhseecheckPersonID: "",
        roleCode: "",
        roleName: "",
      },
      roleData: {}
    };
  },
  mounted() {
    this.handleGetCheckPerson();
    this.loading();
    this.getRoles();
    // this.selection();
  },
  methods: {
    // 分页多选不变
    getRowKey(row) {
      return row.checkPersonID;
    },
    // 清空选择项操作
    clearSelected() {
      this.loading();
    },
    // 查询审核人员姓名
    queryCheckName() {
      if (this.option != "") {
        GetCheckPerson({ checkPersonName: this.option }).then(() => {
          let filter = {
            num: this.pageIdx,
            size: 1,
          };
          GetAllPersonInfo(filter).then((res) => {
            this.tableData = [];
            this.tableData[0] = res.data;
          });
        });
      } else {
        this.loading();
      }
    },
    // 修改操作
    modifyCheckPerson(row) {
      this.AddFormVisible = true;
      console.log("该行数据", row);
      this.updateCheckPersons.checkPersonID = row.checkPersonID;
      this.updateCheckPersons.checkPersonName = row.checkPersonName;
      this.updateCheckPersons.companyName = row.companyName;
      this.updateCheckPersons.qhseecheckPersonID = row.qHSEECheckPersonID;
      this.updateCheckPersons.roleCode = row.roleCode;
      this.updateCheckPersons.roleName = row.roleName;
    },
    // 获取角色下拉框
    getRoles() {
      this.roles = [];
      GetRoles().then((res) => {
        // for (let item in res.data.list) {
        //   this.roles[item] = res.data.list[item];
        // }
        this.roles = res.data;
      });
    },
    // 添加审核人员
    addCheckPeople() {
      this.dialogFormVisible = true;
    },
    // 一键删除
    deleteSelectedItem() {
      console.log(333, this.checkPersonID);
      DeleteSelectedItem(this.checkPersonID).then((res) => {
        if (res.code == 1000) {
          this.$router.go(0);
        }
      });
    },
    // 多选发生变化
    handleSelectionChange(val) {
      this.multipleSelection = [];
      this.checkPersonID = [];
      this.multipleSelection = val;
      for (let item in this.multipleSelection) {
        this.checkPersonID[item] = this.multipleSelection[item].checkPersonID;
      }
      console.log(this.checkPersonID);
    },
    // 删除
    handleDeletePerson(checkPersonID) {
      this.checkPersonID = checkPersonID;
      this.dialogVisible = true;
      this.loading();
    },
    // 二次确认删除数据
    submitDelet() {
      this.dialogVisible = false;
      this.deleteTask();
    },
    // 网络请求删除
    deleteTask() {
      DeleteCheckPerson({ checkPersonID: this.checkPersonID })
        .then((res) => {
          this.$message.success("删除成功");
          this.loading(this.tableData);
          console.log("s", res);
        })
        .catch((e) => {
          console.log(e);
          this.$message.error("删除失败");
        });
    },
    // 获取所有人员信息
    loading() {
      let filter = {
        num: this.pageIdx,
        size: this.pageSize,
      };
      GetAllPersonInfo(filter).then((res) => {
        this.tableData = res.data.list;
        this.indexStartNum = this.pageIdx * this.pageSize + 1;
        this.total = res.data.total;
      });
    },
    //   确认添加审核人员
    submitAddPerson() {
      for (let item in this.roles) {
        if (this.roles[item].name == this.role) {
          this.roleCode = this.roles[item].roleCode;
        }
      }
      console.log(5, this.roleCode);
      if (this.checkPersons.length) {
        const result = this.checkPersons.map((item) => {
          const person = this.options.find((ele) => item === ele.employeeID); //所有人的信息
          console.log(person, 234);
          return {
            checkPersonID: person.employeeID,
            checkPersonName: person.name,
            companyName: person.companyName,
            roleCode: this.roleCode,
            roleName: this.role,
          };
        });
        AddCheckperson({ checkPersons: result })
          .then(() => {
            this.loading();
            this.$message.success("添加成功");
            this.dialogFormVisible = false;
          })
          .catch((err) => {
            this.$message.error(err.message);
          });
      } else {
        this.$notify.warning({
          title: "温馨提示",
          message: "请选择审核人员",
        });
      }
    },
    getRoleData(val) {
      this.updateCheckPersons.roleName = val.name
      this.updateCheckPersons.roleCode = val.roleCode
    },
    updateCheckPerson() {
      var checkPersons = []
      checkPersons.push(this.updateCheckPersons)
      UpdateCheckPerson({checkPersons}).then(() => {
        this.$message.success("修改成功！")
        this.AddFormVisible = false
        this.loading();
      }).catch(err => {
        this.$message.error(err)
      })
    },
    // 改变页码
    handlePageChange(page) {
      this.pageIdx = page;
      this.loading();
    },
    //   获取责任人与整改责任人
    handleGetCheckPerson() {
      getCheckPerson()
        .then((res) => {
          this.options = res.data;
        })
        .catch((err) => {
          this.$message.error(err.message);
          this.leaderLoading = false;
        });
    },
  },
};
</script>

<style scoped>
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.search-label {
  display: flex;
}
.line {
  text-align: center;
}
.page-content {
  margin-top: 35px;
}
.task_delete {
  margin-left: 15px;
}
.detail {
  margin-right: 15px;
}
</style>
